<template>
  <view class="content">
    <view v-if="!token">
      <image src="https://qn.boruichengyi.com/static/index/images/indebg.png" style="width: 100%; height: 750rpx; position: relative; z-index: -99" mode=""></image>
      <view class="myname">我的</view>
      <image src="https://qn.boruichengyi.com/static/index/images/list3.png" class="myavatar" mode=""></image>
      <view class="nologin">未登录</view>
      <view style="font-size: 28rpx; text-align: center">您还未登陆，请先登录</view>
      <button class="gologin" @click="gologin">去登陆</button>
    </view>
    <view v-else>
      <view class="top">
        <view class="status_bar">
          <image src="https://qn.boruichengyi.com/static/index/images/indebg.png" mode=""></image>
        </view>
        <view class="mine">我的</view>
        <view class="portrait">
          <view class="set" @click="gosetting">
            <image src="https://qn.boruichengyi.com/static/index/icon/setting.png" mode=""></image>
          </view>
          <view class="portrait_logo">
            <view class="logo">
              <image :src="userinfo.avatar" mode="aspectFill"></image>
            </view>
            <!-- 实名标签 -->
            <view class="aleadyshiming" v-if="userinfo.is_auth == 2">已实名</view>
            <view class="name">{{ userinfo.nickname }}</view>
            <view class="message">{{ userinfo.company }}</view>
            <view class="school">毕业学校：{{ userinfo.school }}</view>
          </view>
        </view>
      </view>
      <view class="main">
        <!-- 我的资料 -->
        <view class="myinformation">
          <view class="title">
            <view class="h2">
              <view class="line"></view>
              <text>我的资料</text>
            </view>
            <view class="icon" @click="editmyinfo">
              <image src="https://qn.boruichengyi.com/static/index/icon/edit.png"></image>
            </view>
          </view>
          <view class="detailinfor">
            <view class="age">年龄：{{ userinfo.age }}岁</view>
            <view class="sex">性别：{{ userinfo.gender == 0 ? '女' : '男' }}</view>
            <view class="addres">现居：{{ userinfo.residence_province }}</view>
            <view class="education">学历：{{ userinfo.education_texts }}</view>
          </view>
        </view>
        <!-- 我的爱好 -->
        <view class="myhobies">
          <view class="title">
            <view class="h2">
              <view class="line"></view>
              <text>我的爱好</text>
            </view>
            <view class="icon" @click="edmithobby">
              <image src="https://qn.boruichengyi.com/static/index/icon/edit.png" mode=""></image>
            </view>
          </view>
          <view class="hobyinfor">{{ hobby }}</view>
        </view>
        <!-- 我的相册 -->
        <view class="myphoto">
          <view class="title">
            <view class="h2">
              <view class="line"></view>
              <text>我的相册</text>
            </view>
            <view class="more" @click="gomyablum">更多</view>
          </view>
          <view class="photos">
            <image :src="item" v-for="(item, index) in userinfo.images_arr" :key="index" mode="aspectFill" @click="previewimg"></image>
          </view>
        </view>
        <!-- 我的活动 -->
        <view class="myact">
          <view class="title">
            <view class="h2">
              <view class="line"></view>
              <text>我的活动</text>
            </view>
            <view class="more" @click="gomore">更多</view>
          </view>
          <view class="listBox" v-if="!Object.keys(actlist).length == 0">
            <view class="itemlistBox" @click="godetail(actlist.id)">
              <view class="itemList">
                <view class="img">
                  <image :src="actlist.cover_image" mode="aspectFill"></image>
                  <view :class="{ hit: true, full: actlist.status_texts == '已报满' || actlist.status == 2 || actlist.status == 5 }">{{ actlist.status_texts }}</view>
                </view>
                <view class="textt">
                  <view class="h2">{{ actlist.title }}</view>
                  <view class="time">
                    <image src="https://qn.boruichengyi.com/static/index/icon/%E6%97%B6%E9%97%B4.png" mode="" class="icon"></image>
                    <view class="tim" style="flex: 1">{{ actlist.start_time_text + '-' + actlist.end_time_text }}</view>
                  </view>
                  <view class="space">
                    <image src="https://qn.boruichengyi.com/static/index/icon/%E5%AE%9A%E4%BD%8D.png" mode="" class="icon"></image>
                    <view class="spac" style="flex: 1">{{ actlist.address }}</view>
                  </view>
                  <view class="initiator">发起人：{{ actlist.user_info.nickname }}</view>
                  <view class="num">报名人数：{{ actlist.activity_user_num + '/' + actlist.max_num }}</view>
                </view>
                <button type="primary" class="sign" v-if="userid == actlist.user_id">导出数据</button>
                <button type="primary" class="sign" v-else>报名</button>
              </view>
              <view class="timeday">{{ actlist.endTime }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--  <kefu>
      <button open-type="contact"><image src="https://qn.boruichengyi.com/static/index/images/kefu.png" mode="" class="kefu"></image></button>
    </kefu>
     -->
    <kefu></kefu>
  </view>
</template>

<script>
import { timeChange } from '../../utils/tools.js';
export default {
  data() {
    return {
      token: '',
      actlist: {},
      userinfo: {},
      hobby: '', // 爱好
      addact: [], // 参加的活动列表
      pushact: [], // 发布的活动列表
      userid: ''
    };
  },
  async onLoad() {
    this.token = JSON.parse(uni.getStorageSync('userinfo')).token;
    this.userid = JSON.parse(uni.getStorageSync('userinfo')).user_id;
    // 获取个人信息
    await this.getuserinfo();
  },
  onShow() {
    // 获取个人信息
    this.getuserinfo();
  },
  methods: {
    // 点击预览图片
    previewimg() {
      // let imgarr = this.userinfo.images_arr.map();
      uni.previewImage({
        urls: this.userinfo.images_arr
      });
    },

    // 跳转到详情
    godetail(id) {
      uni.navigateTo({
        url: '/sub_active/detail/detail?id=' + id
      });
    },
    // 获取个人信息
    async getuserinfo() {
      const res = await uni.$http.post('user/index', {
        user_id: JSON.parse(uni.getStorageSync('userinfo')).user_id
      });
      if (res.data.code == 0) {
        return uni.redirectTo({
          url: '/pages/login/login'
        });
      }
      this.userinfo = res.data.data;
      console.log(this.userinfo);
      this.userinfo.images_arr = this.userinfo.images_arr.splice(0, 3);
      let hobbylist = [];
      this.userinfo.label_arr.forEach((item) => {
        for (let i = 0; i <= this.userinfo.label_ids.split(',').length; i++) {
          if (item.id == this.userinfo.label_ids.split(',')[i]) {
            hobbylist.push(item);
          }
        }
      });

      this.hobby = hobbylist
        .map((item) => {
          return item.name;
        })
        .join(',');
      if (this.userinfo.activity_info.length == 0) {
        return;
      }
      this.actlist = this.userinfo.activity_info;
      // 开始时间处理
      this.actlist.endTime = this.actlist.end_time_text;
      this.actlist.start_time_text =
        (this.actlist.start_time_text.split('-')[1] + '-' + this.actlist.start_time_text.split('-')[2]).split(':')[0] +
        ':' +
        (this.actlist.start_time_text.split('-')[1] + '-' + this.actlist.start_time_text.split('-')[2]).split(':')[1];
      // 结束时间处理
      this.actlist.end_time_text =
        (this.actlist.end_time_text.split('-')[1] + '-' + this.actlist.end_time_text.split('-')[2]).split(':')[0] +
        ':' +
        (this.actlist.end_time_text.split('-')[1] + '-' + this.actlist.end_time_text.split('-')[2]).split(':')[1];
    },

    // 跳转到我的活动列表页
    gomore() {
      uni.navigateTo({
        url: '/sub_my/exportactdata/exportactdata'
      });
    },
    // 跳转到登陆页
    gologin() {
      uni.redirectTo({
        url: '/pages/login/login'
      });
    },
    // 跳转到设置页面
    gosetting() {
      uni.navigateTo({
        url: '/pages/setting/setting'
      });
    },
    // 编辑个人资料
    editmyinfo() {
      uni.navigateTo({
        url: '/sub_my/myinfo/myinfo'
      });
    },
    // 跳转到我的爱好
    edmithobby() {
      uni.navigateTo({
        url: '/sub_my/myhobby/myhobby'
      });
    },
    // 跳转到我相册
    gomyablum() {
      uni.navigateTo({
        url: '/sub_my/myablums/myablums'
      });
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  // 以下是未登录
  .myname {
    position: absolute;
    color: #fff;
    top: 65rpx;
    left: 340rpx;
  }
  .myavatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    position: absolute;
    top: 250rpx;
    left: 316rpx;
  }
  .nologin {
    position: absolute;
    color: #fff;
    top: 410rpx;
    left: 323rpx;
  }
  .gologin {
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    padding: 0;
    margin-top: 50rpx;
    font-size: 28rpx;
    color: #fff;
    background: #0398ff;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
  // 以下是已登陆
  .top {
    margin-bottom: 100rpx;
    .status_bar {
      height: 80rpx;
      width: 100%;
      position: relative;
      z-index: -99;
      image {
        width: 100%;
        height: 750rpx;
      }
    }
    .mine {
      text-align: center;
      font-weight: 600;
      color: #ffffff;
    }
    .portrait {
      margin-top: 66rpx;
      .set {
        display: flex;
        justify-content: flex-end;
        margin-right: 30rpx;
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
      .portrait_logo {
        display: flex;
        flex-direction: column;
        align-items: center;

        .logo {
          image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
          }
        }
        .aleadyshiming {
          position: relative;
          width: 94rpx;
          height: 40rpx;
          top: -27rpx;
          text-align: center;
          line-height: 40rpx;
          background: #ff5700;
          color: #fff;
          font-size: 24rpx;
          border-radius: 100rpx 100rpx 100rpx 100rpx;
          opacity: 1;
          border: 2rpx solid #ffffff;
        }
        .name {
          font-size: 32rpx;
          font-weight: bold;
        }
        .message,
        .school {
          font-size: 24rpx;
          font-weight: 500;
        }
        .message {
          margin-top: 20rpx;
        }
        .school {
          margin-top: 10rpx;
        }
      }
    }
  }
  .main {
    padding: 0 24rpx;
    padding-top: 60rpx;
    box-sizing: border-box;
    .myinformation,
    .myhobies,
    .myphoto,
    .myact {
      display: flex;
      flex-direction: column;
      .title {
        display: flex;
        justify-content: space-between;
        .h2 {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          font-weight: 800;
          .line {
            width: 6rpx;
            height: 30rpx;
            background: #0398ff;
            border-radius: 100rpx;
            margin-right: 10rpx;
          }
        }
        .icon {
          image {
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
      .detailinfor,
      .hobyinfor {
        display: flex;
        justify-content: space-between;
        padding: 0 34rpx;
        margin: 30rpx 0 40rpx 0;
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
      }
    }
    .myphoto,
    .myact {
      .more {
        font-size: 26rpx;
        font-weight: 500;
        color: #0398ff;
      }
      .photos {
        display: flex;
        margin: 20rpx 0 24rpx 0;
        image {
          width: 198rpx;
          height: 260rpx;
          margin-right: 30rpx;
          border-radius: 20rpx;
        }
      }
      .listBox {
        width: 702rpx;
        display: flex;
        flex-direction: column;
        .itemlistBox {
          display: flex;
          flex-direction: column;
          height: 432rpx;
          background: #e8f6ff;
          border-radius: 20rpx;
          margin: 20rpx 0;
          padding: 20rpx 0 20rpx 20rpx;
          box-sizing: border-box;
          position: relative;
          .itemList {
            display: flex;
            .sign {
              width: 160rpx;
              height: 60rpx;
              line-height: 60rpx;
              position: absolute;
              bottom: 30rpx;
              right: 34rpx;
              border-radius: 100rpx;
              font-size: 24rpx;
              background-color: #0398ff;
            }
            .img {
              display: flex;
              width: 220rpx;
              height: 300rpx;
              margin-right: 20rpx;
              position: relative;
              image {
                width: 100%;
                height: 100%;
              }
              .hit {
                position: absolute;
                top: 0;
                left: 0;
                width: 90rpx;
                height: 40rpx;
                background: #000000;
                border-radius: 20rpx 0rpx 20rpx 0rpx;
                opacity: 0.5;
                font-size: 20rpx;
                color: #ffffff;
                line-height: 40rpx;
                text-align: center;
              }
              .full {
                background-color: #ec1303 !important;
                opacity: 0.8;
              }
            }
            .textt {
              width: 392rpx;
              height: 100%;
              display: flex;
              flex-direction: column;

              .h2 {
                // flex: 1;
                font-size: 28rpx;
                font-weight: 800;
                color: #222222;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .time,
              .space {
                display: flex;
                align-items: center;
                margin-top: 22rpx;
                .icon {
                  width: 23rpx;
                  height: 23rpx;
                }
              }
              .time {
                .tim {
                  font-size: 26rpx;
                  font-weight: 500;
                  color: #222222;
                }
              }
              .space {
                .icon {
                  width: 23rpx;
                  height: 23rpx;
                }
                .spac {
                  font-size: 26rpx;
                  font-weight: 500;
                  color: #333333;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
              }
              .initiator,
              .num {
                margin-top: 20rpx;
                font-size: 24rpx;
              }
            }
          }
          .timeday {
            font-size: 26rpx;
            font-weight: 500;
            color: #333333;
            margin: 34rpx 0 42rpx 0;
          }
        }
      }
    }
  }
}
</style>
